import { DATEFORMAT } from '@/common';
import { DatePicker, Form } from 'antd';
import dayjs from 'dayjs';
import { forwardRef, useImperativeHandle } from 'react';
import { StudyPlanTimeFormProps, TFolderRef } from './interface';

const StudyPlanTimeForm = forwardRef<TFolderRef, StudyPlanTimeFormProps>((props, ref) => {
  const { cycleTime, planCourseId, openStatus } = props;
  const [form] = Form.useForm();
  const effectiveTime = Form.useWatch('effectiveTime', form);

  const onSubmit = () => {
    return form
      .validateFields()
      .then((values) => {
        return Promise.resolve({ effectiveTime: values.effectiveTime.format(DATEFORMAT), planCourseId, openStatus });
      })
      .catch((err) => {
        return Promise.reject(err);
      });
  };

  useImperativeHandle(ref, () => ({
    onSubmit,
  }));
  return (
    <div style={{ padding: '16px 16px 0' }}>
      <Form layout="horizontal" form={form} initialValues={{ effectiveTime: dayjs().add(1, 'day') }}>
        <Form.Item name="effectiveTime" label="生效时间" rules={[{ required: true, message: '请选择生效时间' }]}>
          <DatePicker disabledDate={(currentDate) => currentDate.isBefore(dayjs().endOf('day'))} />
        </Form.Item>
        <Form.Item>
          {cycleTime === 1 ? (
            <p>
              每次只可开启一个每一日一学计划，若有其他每一日一学计划则默认更改为关闭状态
              <br />
              当前设置时间为生效时间，生效后所有驾驶员将变更为红码，并需要完成学习后才可变更安全码颜色。
              <br />
              是否确定开启？
            </p>
          ) : (
            <p>
              当前发布生效时间为
              {effectiveTime ? effectiveTime.format(DATEFORMAT) : dayjs().add(1, 'day').format(DATEFORMAT)}
              开始生效。
              <br />
              是否确定开启？
            </p>
          )}
        </Form.Item>
      </Form>
    </div>
  );
});

export default StudyPlanTimeForm;
